<template>
	<view class="com-content" >
		<view class="header">
			<view class="header-con">
				<view class="top-address" @tap="address_show_action()">
					<image src="../../static/images/ditu-icon.png" style="position: absolute;top: 10rpx;left: 0px;width:24rpx ;height:28rpx ;"></image>
					{{ choose_address.city }}
					<image src="../../static/images/sanjiaoxing.png" style="position: absolute;bottom: 17rpx;right: 0px;width:14rpx ;height:14rpx ;"></image>
				</view>
				<view class="header-input-container">
					<input type="text" placeholder="请输入关键字" placeholder-style="color:#999999;font-size:28rpx;text-align:center" @tap="gosearch()" disabled="true"/>
					<image src="../../static/images/search.png"></image>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<swiper class="imageContainer" previous-margin="45rpx" next-margin="45rpx" circular autoplay="true">
			<swiper-item class="swiperitem" v-for="(item, index) in imgList" :key="index" @tap="gobanner" :data-url="item.link_url">
				<image class="itemImg" :src="item.filepath" lazy-load></image>
				<view class="banner-info">
					<view>#{{ item.subhead }}#</view>
					<view>{{ item.title }}</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 轮播图 -->
		<view class="index_title">
			<view class="circle"></view>
			嗨啤推荐
			<text class="lookmore" @tap="gogoodslist()">查看更多</text>
		</view>
		<view style="box-sizing: border-box;overflow: hidden;">
			<scroll-view class="floor-list" scroll-x style="background: #FFFFFF;">
				<view class="scoll-wrapper">
					<view class="transversal-item" v-for="(item, index) in recommend" :key="index" @tap="gogoodsinfo" :data-id="item.id">
						<view style="position: relative;">
							<image :src="item.filepath"></image>
							<view class="tuijian-info">
								<view>{{ item.style }}</view>
								<view>{{ item.name }}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="index_title">
			<view class="circle"></view>
			嗨啤说
			<text class="lookmore" @tap="articlelist()">查看更多</text>
		</view>

		<!-- </view> -->
		<view class="news-container" >
			<view class="news-item" @tap="gonewsinfo" v-for="(item, index) in articles" :key="index" :data-id="item.id">
				<view class="news-img">
					<!-- <image src="../../static/images/shipin-icon.png" class="shipin-icon"></image> -->
					<image :src="item.filepath" class="news-images"></image>
				</view>
				<view class="news-title">{{ item.title }}</view>
				<view class="news-resourse clear">
					<text class="left">{{ item.source }}</text>
					<text class="right">{{ item.read_nums }}阅读</text>
				</view>
			</view>
		</view>
		<!-- 地址弹出框 -->
		<view v-show="address_show">
			<view class="mark"></view>
			<view class="address-container">
				<view class="address-title border-bottom">
					<image src="../../static/images/shuaxin.png" style="width:171rpx;height:54rpx;position: absolute;top: 25rpx;left: 20rpx;" @tap="shuaxin()"></image>
					{{ choose_address.province }}——{{ choose_address.city }}
					<image src="../../static/images/pay-close.png" style="float: right;width: 32rpx;height: 32rpx;" @tap="close_address()"></image>
				</view>
				<view class="uni-row">
					<view class="address-item" style="border-right: 1px solid #F2F2F2;">
						<scroll-view scroll-y="true" class="scroll-view">
							<view>
								<view class="city-name " v-for="(item, index) in provinces" :key="index" @tap="xuanzedizhi" :data-id="item.id" :data-index="index">
									<image :src="item.img"></image>
									{{ item.name }}
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="address-item" style="padding-left: 32rpx;box-sizing: border-box;">
						<scroll-view scroll-y="true" class="scroll-view">
							<view>
								<view class="city-name " v-for="(item, index) in citys" :key="index" @tap="xuanzecity" :data-id="item.id" :data-name="item.name">
									<image :src="item.img"></image>
									{{ item.name }}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var page=1;
import MescrollUni from "@/components/uni-load-more.vue";	
import amap from '@/components/js-amap/amap-wx.js';
import httpPath from '@/static/js/path.js';
export default {
	data() {
		return {
			imgList: [
				'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3687173686,831911132&fm=26&gp=0.jpg',
				'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2601388974,2460884874&fm=26&gp=0.jpg',
				'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2294966447,248611631&fm=26&gp=0.jpg'
			],
			loadingType: 0,
			contentText: {
				contentdown: "上拉显示更多",
				contentrefresh: "正在加载...",
				contentnomore: "没有更多数据了"
			},
			indicatorDots: false,
			autoplay: true,
			interval: 2000,
			duration: 500,
			address_show: false,
			amapPlugin: null,
			provinces: [],
			citys: [],
			choosedprovinces: '',
			key: '127a8a73b4bb644c0893d7a4d14b246a',
			region: {},
			choosedcity: '',
			choose_address: {province:"甘肃",provinceid:28,cityid:448,city:"兰州市"},
			recommend: {},
			articles: [],
			address:{}
		};
	},
	onShow() {
		this.amapPlugin = new amap.AMapWX({
			key: this.key
		});
		this.getbanner();
		this.getaddress();
	},
	onLoad() {
		
		this.amapPlugin = new amap.AMapWX({
			key: this.key
		});
		this.getbanner();
		this.getaddress();
		this.getarticle();
		page=1;
		
		this.loadingType=0;
	},
	onReachBottom: function() {
	
		if (this.loadingType != 0) {//loadingType!=0;直接返回
			return false;
		}
		this.loadingType = 1;
		uni.showNavigationBarLoading();//显示加载动画
		page++;//每触底一次 page +1
		let data={province_id:this.choose_address.provinceid,city_id:this.choose_address.cityid,page:page};
		// if(this.keywords){
		// 	data.keywords=this.keywords
		// }
		
		uni.request({
			url: httpPath.filePath+"/index/regoin/article",
			method:'POST',
			header:{'content-type':'application/x-www-form-urlencoded'},
			data: data,
			success: (res) => {
				if (res.data.data.article.length==0) {//没有数据
					this.loadingType = 2;
					uni.hideNavigationBarLoading();//关闭加载动画
					return false;
				}
				for (let i = 0;i < res.data.data.article.length;i++) {
					this.articles.push(res.data.data.article[i]);
				}
				this.loadingType = 0;//将loadingType归0重置
				uni.hideNavigationBarLoading();//关闭加载动画
				
			}
		});
	
	},
	methods: {
		/**
		 * 刷新地址
		 */
		shuaxin(){
			let $this=this;
			uni.removeStorage({
			    key: 'choose_address',
			    success: function (res) {
			        $this.getaddress();
					$this.address_show=false;
			    }
			});
		},
		gosearch(){			
			uni.navigateTo({
				url:"../shopping/saerch"
			})

		},
		/**
		 * 点击banner图跳转页面
		 */
		gobanner(e) {
			let url = e.currentTarget.dataset.url;
			if (url) {
				uni.navigateTo({
					url: url
				});
			}
		},
		/**
		 * 进入文章列表
		 */
		articlelist() {
			uni.navigateTo({
				url: 'newslist'
			});
		},
		/**
		 * 进入推荐商品列表
		 */
		gogoodslist() {
			uni.navigateTo({
				url: '../shopping/tuijian'
			});
		},
		/**
		 * 推荐商品详情
		 */
		gogoodsinfo(e) {
			uni.navigateTo({
				url: '../shopping/goodsinfo?id=' + e.currentTarget.dataset.id
			});
		},
		/**
		 * 获得banner图
		 */
		getbanner() {
			uni.request({
				url: httpPath.filePath + '/index/index/index',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: {},
				success: res => {
					if (res.data.code == 200) {
						if (res.data.data.banner.length != 0) {
							this.imgList = res.data.data.banner;
							this.recommend = res.data.data.recommend;
						}
					}
				}
			});
		},
		/**
		 * 获得地区
		 */
		getaddress() {
			
			uni.request({
				url: httpPath.filePath + '/index/regoin/index',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: {},
				success: res => {
					this.address = res.data.data.region;
					// uni.setStorageSync('address',res.data.data.region)
					uni.setStorage({
						key: 'address',
						data: res.data.data.region,
						success: function() {}
					});
					this.getloaction();
				}
			});
		},
		/**
		 * 获取当前定位
		 */
		getloaction() {
			let $this = this;			
			const value = uni.getStorageSync('choose_address');
			const address = uni.getStorageSync('address');
			if (!value) {
				this.amapPlugin.getRegeo({
					success: data => {
						let province = data[0].regeocodeData.addressComponent.province;
						let city = data[0].regeocodeData.addressComponent.city;
						let district = data[0].regeocodeData.addressComponent.district;
						if (province.substring(province.length - 1, province.length) == '省') {
							province = province.substring(0, province.length - 1);
						}
						if (city.substring(city.length - 1, city.length) == '省') {
							city = city.substring(0, city.length - 1);
						}
						let provinceid = '';
						let cityid = '';
						let townid = '';
						let address= $this.address;
						for (let i = 0; i < address.length; i++) {
							if (province == address[i].name) {
								provinceid = address[i].id;
								console.log(address[i].id);
								for (let j = 0; j < address[i].city.length; j++) {
									if (city == address[i].city[j].name) {
										cityid = address[i].city[j].id;
										for (let a = 0; a < address[i].city[j].county.length; a++) {
											if (district == address[i].city[j].county[a].name) {
												townid = address[i].city[j].county[a].id;
											}
											// break;
										}
										// break;
									}
								}
								// break;
							}
						}

						$this.choose_address.city = city;
						$this.choose_address.province = province;
						$this.choose_address.provinceid = provinceid;
						$this.choose_address.cityid = cityid;
						$this.choose_address.townid = townid;
						$this.choose_address.town = district;
						uni.setStorage({
							key: 'choose_address',
							data: $this.choose_address,
							success: function() {
								$this.getarticle();
							}
						});
						// }
						// });
					}
				});
			} else {
				let $this = this;
				uni.getStorage({
					key: 'choose_address',
					success: function(res) {
						$this.choose_address = res.data;
						$this.getarticle();
					}
				});
			}
		},
		close_address() {
			this.address_show = false;
		},
		gonewsinfo(e) {
			uni.navigateTo({
				url: 'newsinfo?id=' + e.currentTarget.dataset.id
			});
		},
		address_show_action() {
			let $this = this;
			$this.provinces = [];
			const address = uni.getStorageSync('address');
			if (!address) {
				this.getaddress();
			}
			uni.getStorage({
				key: 'address',
				success: function(res) {
					$this.region = res.data;
					for (let i = 0; i < res.data.length; i++) {
						$this.provinces.push({ name: res.data[i].name, id: res.data[i].id, checked: 0, img: '../../static/images/weixuanzhong.png' });
					}
					
				}
			});
			this.address_show = true;
		}
		/**
		 *选择省
		 */,
		xuanzedizhi(e) {
			let $this = this;
			this.citys = [];
			let id = e.currentTarget.dataset.id;
			let index = e.currentTarget.dataset.index;
			for (let i = 0; i < $this.region.length; i++) {
				if ($this.region[i].id == id) {
					$this.provinces[i].img = '../../static/images/xuanzhong.png';
					$this.provinces[i].check = 1;
					$this.choosedprovinces = $this.provinces[i].name;
					$this.choose_address.province = $this.provinces[i].name;
					$this.choose_address.provinceid = $this.provinces[i].id;
					for (let j = 0; j < $this.region[i].city.length; j++) {
						$this.citys.push({ name: $this.region[i].city[j].name, id: $this.region[i].city[j].id, checked: 0, img: '../../static/images/weixuanzhong.png' });
					}
				} else {
					$this.provinces[i].img = '../../static/images/weixuanzhong.png';
					$this.provinces[i].check = 0;
				}
			}
		}
		/**
		 * 选择市
		 */,
		xuanzecity(e) {
			let $this = this;
			this.choose_address.cityid = e.currentTarget.dataset.id;
			this.choose_address.city = e.currentTarget.dataset.name;
			uni.setStorage({
				key: 'choose_address',
				data: this.choose_address,
				success: function() {
					$this.address_show = false;
					$this.getarticle();
				}
			});
		}
		/**
		 * 获取文章
		 */,
		getarticle() {
			uni.request({
				url: httpPath.filePath + '/index/regoin/article',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: { province_id: this.choose_address.provinceid, city_id: this.choose_address.cityid,page:page },
				success: res => {
					if (res.data.code == 200) {
						if (res.data.data.article.length != 0) {
							this.articles = res.data.data.article;
						}
					} else {
						uni.showModal({
							content: res.data.mes
						});
					}
				}
			});
		}
	}
};
</script>
<style>
page {
	width: 100%;
	box-sizing: border-box;
	background: #f9f9f9;
}
.address-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #7adba8;
	text-align: center;
	padding-bottom: 20rpx;
}
.scroll-view {
	height: 100%;
}
.city-name {
	height: 90rpx;
	line-height: 90rpx;
	font-size: 28rpx;
	color: #666;
}
.city-name image {
	width: 36rpx;
	height: 36rpx;
	vertical-align: middle;
	margin-right: 20rpx;
}
.lookmore {
	position: absolute;
	top: 18rpx;
	right: 33rpx;
	height: 38rpx;
	font-size: 18rpx;
	color: #333333;
	border: 1px solid #333333;
	border-radius: 19rpx;
	padding: 0px 10rpx;
	line-height: 38rpx;
}
.header-con {
	
	display: flex;
	justify-content: flex-start;
}
.top-address {
	width: 150rpx;
	position: relative;
	font-size: 28rpx;
	color: #fff;
	margin: 0px 32rpx;
	text-align: center;
	padding: 0px 25rpx;
	box-sizing: border-box;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.header {
	height: 85rpx;
	background: #333;
	padding-top: 16rpx;
	position: fixed;
	top: 0rpx;
	left: 0px;
	width: 100%;
	z-index: 1000;
}
.header-input-container {
	width: 488rpx;
	height: 57rpx;
	border-radius: 30rpx;
	position: relative;
	background: #fff;
}
.header-input-container input {
	width: 100%;
	height: 100%;
	padding-left: 20rpx;
	background: #fff;
	border: none;
	border-radius: 30rpx;
}
.header-input-container image {
	width: 29rpx;
	height: 36rpx;
	position: absolute;
	top: 10rpx;
	right: 20rpx;
}
.imageContainer {
	width: 750rpx;
	height: 522rpx;
	margin: 30rpx 0px 15rpx;
}
.itemImg {
	width: 630rpx;
	height: 522rpx;
	border-radius: 10rpx;
}

.swiperitem {
	width: 630rpx;
	height: 522rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.banner-info {
	position: absolute;
	bottom: 0px;
	left: 18rpx;
	border-radius: 0px 0px 5px 5px;
	width: 630rpx;
	color: #fff;
	background: -moz-linear-gradient(top, transparent 0%, #000 100%);
	background: -webkit-linear-gradient(top, transparent 0%, #000 100%);
	background: -o-linear-gradient(top, transparent 0%, #000 100%);
	background: -ms-linear-gradient(top, transparent 0%, #000 100%);
	background: linear-gradient(to bottom, transparent 0%, #000 100%);
}
.banner-info view:nth-of-type(1) {
	width: 100%;
	height: 23px;
	font-size: 12px;
	font-weight: 400;
	color: rgba(115, 207, 126, 1);
	line-height: 26px;
}
.banner-info view:nth-of-type(2) {
	font-size: 28rpx;
	padding-bottom: 20rpx;
}

.banner-info view {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0px 20rpx;
	box-sizing: border-box;
}
page {
	background: #ffffff;
}

.clear::after {
	content: '';
	display: block;
	clear: both;
}
.left {
	float: left;
}
.right {
	float: right;
}
/* .index_slide block{width: 90%;} */
.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
.index_title {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding-left: 57rpx;
	height: 84rpx;
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: rgba(41, 41, 41, 1);
	line-height: 84rpx;
	z-index: 10;
}
.index_title .circle {
	position: absolute;
	top: 15rpx;
	left: 32rpx;
	width: 52rpx;
	height: 52rpx;
	background: #73cf7e;
	border-radius: 50%;
	z-index: -10;
	opacity: 0.3;
}
.floor-list {
	width: 100%;
	white-space: nowrap;
	padding-right: 25upx;
	padding0-left: 25upx;
	border-radius: 6upx;
	// position: relative;
}

.scoll-wrapper {
	display: flex;
	align-items: flex-start;
}
.transversal-item {
	width: 286rpx;
	/* height: 373rpx; */
	height: 286rpx;
	border-radius: 12px;
	margin: 28rpx;
}
.transversal-item > view {
	overflow: hidden;
	border-radius: 5px;
	width: 100%;
	height: 286rpx;
}
.transversal-item > view > image {
	width: 286rpx;
	height: 286rpx;
	display: block;
}
.news-resourse {
	color: #999999;
	font-size: 22rpx;
	margin-top: 10rpx;
	padding-bottom: 20rpx;
	border-bottom: 1px solid #f2f2f2;
}
.toutiao_slide {
	width: 100%;
	height: 90rpx;
}
.toutiao_slide swiper {
	height: 90rpx;
}
.toutiao-item {
	padding: 0px 32rpx;
	overflow: hidden;
}
.toutiao-icon {
	float: left;
	width: 73rpx;
	height: 73rpx;
	border-radius: 5px;
	overflow: hidden;
}
.toutiao-icon image {
	width: 100%;
	height: 100%;
}
.toutiao-contanier {
	float: left;
	width: 579rpx;
	padding-left: 21rpx;
}
.news-container {
	
	box-sizing: border-box;
	width: 100%;
	padding: 32rpx;
}
.news-img {
	width: 686rpx;
	border-radius: 10rpx;
	overflow: hidden;
	position: relative;
}
.news-img .shipin-icon {
	width: 107rpx;
	height: 107rpx;
	position: absolute;
	top: calc(50% - 53rpx);
	left: calc(50% - 53rpx);
	z-index: 10;
}
.news-img .news-images {
	width: 100%;
	height: 330rpx;
	border-radius: 10rpx;
}
/* .news-img video{width:100%;height:330rpx;border-radius: 10rpx;} */
.news-item {
	margin-bottom: 20rpx;
}
.news-title {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	line-height: 43rpx;
}
.toutiao-contanier .toutiao-title {
	width: 100%;
	height: 30rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: rgba(41, 41, 41, 1);
	line-height: 30rpx;
	margin-bottom: 15rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.toutiao-contanier .toutiao-info {
	width: 100%;
	height: 30rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
	line-height: 24rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.tuijian-info {
	position: absolute;
	bottom: 0px;
	left: 0px;
	box-sizing: border-box;
	padding: 20rpx 10rpx;
	width: 100%;
	background: -moz-linear-gradient(top, transparent 0%, #000 100%);
	background: -webkit-linear-gradient(top, transparent 0%, #000 100%);
	background: -o-linear-gradient(top, transparent 0%, #000 100%);
	background: -ms-linear-gradient(top, transparent 0%, #000 100%);
	background: linear-gradient(to bottom, transparent 0%, #000 100%);
}
.tuijian-info view {
	color: #fff;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100%;
}
.tuijian-info view:nth-of-type(1) {
	font-size: 20rpx;
	font-weight: 400;
	height: 30rpx;
	color: rgba(255, 255, 255, 1);
	line-height: 30rpx;
	margin-bottom: 10rpx;
}
.tuijian-info view:nth-of-type(2) {
	height: 30rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: rgba(255, 255, 255, 1);
	line-height: 30rpx;
}

.index_slide .slick {
	margin-top: 0;
	width: 100%;
	max-height: 153px;
	overflow: hidden;
}
.address-container {
	z-index: 100000;
	position: fixed;
	top: 85rpx;
	left: 0px;
	background: #fff;
	height: 662rpx;
	padding: 32rpx;
	box-sizing: border-box;
	width: 100%;
}
.address-item {
	width: 50%;
	height: 550rpx;
	box-sizing: border-box;
}
</style>
